<template>
  <div class="app-container">
    <el-card class="bug-search">
      <!-- 这个页面存在不确定的问题，协同过滤特征到底是如何分配的，所以存在问题，不如不展示这部分内容 -->
      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
        <el-select v-model="queryParams.project" placeholder="请选择">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-form-item prop="id" style="margin-left:10px;margin-bottom:0px;">
          <el-input v-model="queryParams.bugId" placeholder="请输入bugID" style="width: 200px" />
        </el-form-item>
        <el-form-item style="margin-bottom:0px;">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="width: 100%;margin-top:30px;">
      <span class="h3_title mb_16">多模态特征列表</span>
      <!-- <el-row :gutter="10" class="mb8 fl_r" style="float:right;margin-right:20px">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增缺陷</el-button>
        </el-col>
      </el-row> -->
      <el-table :data="featureList" style="width: 100%;margin-top:30px;" border>
        <el-table-column align="center" label="编号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="commit">
          <template slot-scope="scope">
            {{ scope.row.commit }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="文本相似度特征">
          <template slot-scope="scope">
            {{ scope.row.wenben }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="协同过滤性特征">
          <template slot-scope="scope">
            {{ scope.row.xietong }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="令牌匹配特征">
          <template slot-scope="scope">
            {{ scope.row.lingpai }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="最近修复频率特征">
          <template slot-scope="scope">
            {{ scope.row.pinlv }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="缺陷修复间隔特征">
          <template slot-scope="scope">
            {{ scope.row.jiange }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="堆栈跟踪信息特征">
          <template slot-scope="scope">
            {{ scope.row.duizhan }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="圈复杂度特征">
          <template slot-scope="scope">
            {{ scope.row.quan }}
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope)">修改</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>

    <!-- <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType==='edit'?'编辑缺陷':'新增缺陷'"
      :before-close="handleClose"
      class="bugDialog"
    >
      <el-form :model="bugContent" label-width="100px" label-position="left">
        <el-form-item label="bugId">
          <el-input v-model="bugContent.bugId" placeholder="请输入bugId" />
        </el-form-item>
        <el-form-item label="commit">
          <el-input v-model="bugContent.commit" placeholder="请输入commit" />
        </el-form-item>
        <el-form-item label="summary">
          <el-input
            v-model="bugContent.summary"
            :autosize="{ minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="请输入缺陷摘要"
          />
        </el-form-item>
        <el-form-item label="description">
          <el-input
            v-model="bugContent.description"
            :autosize="{ minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="请输入缺陷描述"
          />
        </el-form-item>
        <el-form-item label="comment">
          <el-input
            v-model="bugContent.comment"
            :autosize="{ minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="请输入缺陷评论"
          />
        </el-form-item>
        <el-form-item label="reported_ts">
          <el-date-picker
            v-model="bugContent.reported_ts"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="status">
          <el-select v-model="bugContent.status" placeholder="请选择">
            <el-option
              v-for="item in bugStatus"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="files">
          <el-input
            v-model="bugContent.files"
            :autosize="{ minRows: 2, maxRows: 4}"
            type="textarea"
            placeholder="请输入相关文件"
          />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="handelBugCancel">取消</el-button>
        <el-button type="primary" @click="confirmBug">确定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { deepClone } from '@/utils'

export default {
  data() {
    return {
      featureList: [],
      dialogVisible: false,
      dialogType: 'new',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      statusOptions: [{
        value: '选项1',
        label: 'Tomcat'
      }, {
        value: '选项2',
        label: 'SWT'
      }, {
        value: '选项3',
        label: 'JDT'
      }],
      queryParams: {
        project: 'Tomcat',
        bugId: ''
      },
      defaultFeatureList: [{
        commit: '12020',
        linpai: '',
        xietong: '5',
        pinlv: '6',
        jiange: '',
        duizhan: '7',
        quan: '',
        wenben: ''
      }],
      featureContent: {
        commit: '12020',
        linpai: '',
        xietong: '5',
        pinlv: '6',
        jiange: '',
        duizhan: '7',
        quan: '',
        wenben: ''
      }
    }
  },
  mounted() {
    this.getFeatureList()
  },

  methods: {
    getFeatureList() {
      const storedFeatures = localStorage.getItem('featureList')
      this.featureList = storedFeatures ? JSON.parse(storedFeatures) : this.defaultFeatureList
    }
    //     handleQuery() {
    //       console.log(1)
    //     },
    //     handleAdd() {
    //       this.dialogType = 'new'
    //       this.dialogVisible = true
    //     },

    //     confirmBug() {
    //       const isEdit = this.dialogType === 'edit'
    //       console.log(this.featureContent)

    //       if (isEdit) {
    //         const index = this.bugList.findIndex(bug => bug.bugId === this.bugContent.bugId)
    //         if (index !== -1) {
    //           this.$set(this.bugList, index, { ...this.bugContent })
    //         }
    //       } else {
    //         this.bugList.push(this.bugContent)
    //       }
    //       localStorage.setItem('bugList', JSON.stringify(this.bugList))
    //       this.dialogVisible = false
    //       this.resetBug()
    //     },

    //     resetBug() {
    //       this.bugContent = {
    //         commit: '12020',
    //         linpai: '',
    //         xietong: '5',
    //         pinlv: '6',
    //         jiange: '',
    //         duizhan: '7',
    //         quan: '',
    //         wenben: ''
    //       }
    //     },
    //     handelBugCancel() {
    //       this.dialogVisible = false
    //       this.resetBug()
    //     },
    //     handleClose() {
    //       this.dialogVisible = false
    //       this.resetBug()
    //     },
    //     handleEdit(scope) {
    //       this.dialogType = 'edit'
    //       this.dialogVisible = true
    //       this.checkStrictly = true
    //       this.bugContent = deepClone(scope.row)
    //     },
    //     handleDelete({ $index, row }) {
    //       this.$confirm('确认删除这条数据', 'warning', {
    //         confirmButtonText: '确认',
    //         cancelButtonText: '取消',
    //         type: 'warning'
    //       })
    //         .then(async() => {
    //           this.bugList.splice($index, 1)
    //           localStorage.setItem('bugList', JSON.stringify(this.bugList))
    //           this.$message({
    //             type: 'success',
    //             message: '删除成功'
    //           })
    //         })
    //         .catch(err => { console.error(err) })
    //     }
  }
}
</script>

<style lang="scss" scoped>

</style>
